<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $.ajax({
                type: "get",
                url: "/selectAllIT",
                dataType: "json",
                success: function(data) {
                    var td = "";
                    $.each(data, function(index, student) {
                        td += "<span><button style='margin: 5px' value='"+student.name+"'>"+student.name+"</button></span>";
                    });

                    $("#tr").html(td);
                }
            });
            $.ajax({
                type: "get",
                url: "/selectSignInCount",
                dataType: "json",
                success: function(data) {
                    var td = "总人数："+data.sum+"  /已签到人数："+data.count;
                    $("#title").html(td);
                }
            });

            $("#noSignIn").click(function () {
                $.ajax({
                    type: "get",
                    url: "/noSignIn",
                    dataType: "json",
                    success: function(data) {
                        var td = "";
                        $.each(data.list, function(index, student) {
                            td += "<span><button style='margin: 5px' value='"+student.name+"'>"+student.name+"</button></span>";
                        });
                        $("#title").html("总人数："+data.result+" /未签到人数："+data.noCount);
                        $("#tr").html(td);
                    }
                });
            })

            $("#subt2").click(function () {
                window.location.reload();
            })

            $("#subt").click(function() {
                $.ajax({
                    type: "post",
                    url: "/add",
                    data: {
                        name: $("#name").val()
                    },
                    dataType: "json",
                    success: function(data) {
                        if(data == 1) {
                            alert("签到成功！");
                            window.location.reload();
                        } else if(data == 0) {
                            alert("签到失败！");
                        }
                    }
                });
            });

            $("#delSignIn").click(function () {
                $.ajax({
                    type: "Put",
                    url: "/updateSignIn",
                    dataType: "json",
                    success: function(data) {
                        if(data == 1) {
                            alert("清除签到成功！");
                            window.location.reload();
                        } else if(data == 0) {
                            alert("清除签到失败！");
                        }
                    }
                });
            })


        });
    </script>

    <style>
        .box{
            border: 1px red solid;
            text-align:center;
            width: 500px;
            margin: auto;
        }


        .top{
            border-bottom: 1px gray solid;
            margin-bottom: 20px;
        }
        .input{
            border-radius: 6px;
            width: 300px;
            height: 45px;
            line-height: 45px;
        }
        .but{
              width:90px;
              height: 40px;
              line-height: 40px;
              background-color: dodgerblue;
              border-radius: 6px;
          }

        .buts{
            width: 140px;
            height: 40px;
            line-height: 40px;
            background-color: dodgerblue;
            border-radius: 6px;
        }

        .but3{
            border-radius: 6px;
            border: 1px gray solid;
            width: 80px;
            height: 30px;
            line-height: 30px;
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
<div class="box">

   <div class="top">
        <h3>欢迎来到签到页</h3>
       <p>名字：<input type="text" class="input" name="name" placeholder="请输入你的名字" id="name"></p>
       <p>
            <div style="margin-bottom: 10px">
               <form enctype="multipart/form-data" method="post" action="/excelImport">    
                   选择Excel表格：<input type="file" name="file"/>  
                   <input type="submit" class="but3" value="上传"/>
               </form>
            </div>

         <button type="submit" id="subt" class="but" value="签到">签到</button>
       </p>
   </div>
    <button type="submit" id="subt2" class="but" value="已签到">已签到</button>
    <button id="delSignIn" type="button" class="buts" value="清除签到">清除签到</button>
     <button type="button" id="noSignIn" class="buts" value="查询未签到">查询未签到</button>

    <div>
        <p id="title">签到人数：</p>
    </div>
    <div>
       <h4>名字：</h4>
        <div id="tr" style="width: 500px">

        </div>
    </div>

</div>
</body>
</html>